<template>
	<view>
		<!-- 顶部搜索 -->
		<view class="top-search u-flex">
			<view class="u-flex u-flex-1 search-box">
				<view class="left-box u-flex">
					<text class="text">{{com_address.name}}</text>
					<!-- <text class="iconfont icon-xiasanjiaoxing"></text> -->
				</view>
				<view class="centre-box u-flex" @click="jump('/pages/search/search')">
					<text class="iconfont icon-sousuo"></text>
					<text class="search-placeholder">新房等关键词</text>
				</view>
				<view class="right-box u-flex" @click="jump('/pages/map/index')">
					<image src="@/static/icon/index-location.png"></image>
					<text>地图</text>
				</view>
			</view>
		</view>
		<!-- 金刚区导航 -->
		<view class="nav-list u-flex u-flex-wrap">
			<view class="item u-flex" v-for="(item,index) in navList" :key="index" @click="$app.eventJump(item.url)">
				<image :src="item.image"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- 推荐列表 -->
		<view class="recommend-list" v-if="homeSet">
			<view class="panel">
				<view class="re-title u-flex">
					<text class="red-dot"></text>
					<view class="title">{{homeSet.new_house.more}}</view>
					<view class="more u-flex" @click="jump('/pages/house/newHouse/index')"><text>更多在售楼盘</text><text class="iconfont icon-jiantouyou"></text></view>
				</view>
				<view class="re-list u-flex">
					<view class="item" v-for="item in newhouse" :key="item.id" @click="jump(`/pages/house/newHouse/detail?id=${item.id}`)">
						<u-image width="206" height="154" border-radius="18" :src="imgUrl(item.images)"></u-image>
						<view class="title u-line-2">{{item.name}}</view>
						<view class="label u-ellipsis">在售{{Number(item.min_area)}}-{{Number(item.max_area)}}m²</view>
						<view class="price u-ellipsis">{{Number(item.unitprice)}}元/m²</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="re-title u-flex">
					<text class="red-dot"></text>
					<view class="title">{{homeSet.second_hand_house.more}}</view>
					<view class="more u-flex" @click="jump('/pages/house/oldHouse/index')"><text>更多必看好房</text><text class="iconfont icon-jiantouyou"></text></view>
				</view>
				<view class="re-list u-flex">
					<view class="item" v-for="item in secondHandHouse" :key="item.id" @click="jump(`/pages/house/oldHouse/detail?id=${item.id}`)">
						<u-image width="206" height="154" border-radius="18" :src="imgUrl(item.images)"></u-image>
						<view class="title u-line-2">{{item.name}}</view>
						<view class="label u-ellipsis">{{item.area}}m²/{{item.housebaseset_housetype[0].name}}</view>
						<view class="price u-ellipsis">{{Number(item.totalprice)}}万</view>
					</view>
				</view>
			</view>
			<view class="panel">
				<view class="re-title u-flex">
					<text class="red-dot"></text>
					<view class="title">{{homeSet.rent_house.more}}</view>
					<view class="more u-flex" @click="jump('/pages/house/renting/index')"><text>更多</text><text class="iconfont icon-jiantouyou"></text></view>
				</view>
				<view class="re-list u-flex">
					<view class="item" v-for="item in rentHouse" :key="item" @click="jump(`/pages/house/renting/detail?id=${item.id}`)">
						<u-image width="206" height="154" border-radius="18" :src="imgUrl(item.images)"></u-image>
						<view class="title u-line-2">{{item.title}}</view>
						<view class="label u-ellipsis">{{item.area}}m²/{{item.housebaseset_housetype[0].name}}</view>
						<view class="price u-ellipsis">{{Number(item.unitprice)}}元/月</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 更多列表 热门新房 -->
		<view class="more-list" v-if="hotNewhouse || hotSecondHandHouse">
			<view class="re-title u-flex">
				<text class="red-dot"></text>
				<view class="title">热门新房</view>
			</view>
			<view class="more-item u-flex" v-for="item in hotNewhouse" :key="item.id" @click="jump(`/pages/house/newHouse/detail?id=${item.id}`)">
				<view class="image">
					<u-image width="206" height="160" border-radius="18" :src="imgUrl(item.images)"></u-image>
				</view>
				<view class="info u-flex-1">
					<view class="title u-flex">
						<view class="name u-flex-1 u-ellipsis">{{item.name}}</view>
						<view class="label">
							<text v-if="item.is_selected_switch">精选</text>
							<text v-if="item.status === '1'" class="wait">待售</text>
							<text v-if="item.status === '2'">在售</text>
						</view>
					</view>
					<view class="position u-ellipsis" style="height: 32rpx;">{{item.title}}</view>
					<view class="label-list u-ellipsis">
						<text v-for="f in item.housebaseset_features" :key="f.id">{{f.name}}</text>
					</view>
					<view class="price-box u-flex">
						<view class="price">均价{{Number(item.unitprice)}}元/m²</view>
						<!-- <view class="text">建面85-114m²</view> -->
						<view class="text">在售{{Number(item.min_area)}}-{{Number(item.max_area)}}m²</view>
					</view>
				</view>
			</view>
			<view class="more" @click="jump('/pages/house/newHouse/index')">查看更多新房<text class="iconfont icon-jiantouyou"></text></view>
		</view>
		
		<!-- 更多列表 热门二手房 -->
		<view class="more-list">
			<view class="re-title u-flex">
				<text class="red-dot"></text>
				<view class="title">热门二手房</view>
			</view>
			<view class="more-item u-flex" v-for="item in hotSecondHandHouse" :key="item.id" @click="jump(`/pages/house/oldHouse/detail?id=${item.id}`)">
				<view class="image">
					<u-image width="206" height="160" border-radius="18" :src="imgUrl(item.images)"></u-image>
				</view>
				<view class="info u-flex-1">
					<view class="title u-flex">
						<view class="name u-flex-1 u-ellipsis">{{item.name}}</view>
						<view class="label">
							<text v-if="item.is_selected_switch">精选</text>
							<text v-if="item.status === '1'" class="wait">待售</text>
							<text v-if="item.status === '2'">在售</text>
						</view>
					</view>
					<view class="position u-ellipsis">{{item.housebaseset_housetype[0].name}}/{{item.housebaseset_orientation_name}}</view>
					<view class="label-list u-ellipsis">
						<text v-for="f in item.housebaseset_features" :key="f.id">{{f.name}}</text>
					</view>
					<view class="price-box u-flex">
						<view class="price">{{Number(item.totalprice)}}万</view>
						<view class="text">{{Number(item.unitprice)}}元/平</view>
					</view>
				</view>
			</view>
			<view class="more" @click="jump('/pages/house/oldHouse/index')">查看更多二手房<text class="iconfont icon-jiantouyou"></text></view>
		</view>
		<!-- <button type="default" show-message-card open-type="contact">客服进入</button> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:'',
				homeSet:'',
				newhouse:'',
				secondHandHouse:'',
				rentHouse:'',
				
				hotNewhouse:'',
				hotSecondHandHouse:''
			}
		},
		methods: {
			getHome(){
				this.$u.api.getHomeClassify().then(res=>this.navList = res)
				this.$u.api.getHomeSet().then(res=>{
					let obj = {}
					res.forEach(i=>{
						obj[i.key] = {
							name:i.name,
							more:i.value
						}
					})
					this.homeSet = obj
				})
				this.$u.api.getNewhouse().then(res=>this.newhouse = res)
				this.$u.api.getRentHouse().then(res=>this.rentHouse = res)
				this.$u.api.getSecondHandHouse().then(res=>this.secondHandHouse = res)
				this.$u.api.getHotNewhouse().then(res=>this.hotNewhouse = res)
				this.$u.api.getHotSecondHandHouse().then(res=>this.hotSecondHandHouse = res)
			}
		},
		onLoad() {
			this.getHome()
		},
		onPullDownRefresh() {
			this.getHome()
			setTimeout(t=>uni.stopPullDownRefresh(),500)
		}
	}
</script>

<style lang="scss">
	page{background-color: #f5f2f5;}
	.top-search{position: sticky;top: 0;left: 0;background-color: $tc;padding: 26rpx 35rpx 30rpx;z-index: 99;
		.search-box{background-color: #fff;border-radius: 50rpx;height: 96rpx;font-weight: bold;
			.left-box{width: 150rpx;border-right: 2rpx solid #999;justify-content: center;
				.text{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: right;}
				.iconfont{color: #666;font-size: 30rpx;font-weight: normal;padding-left: 8rpx;margin-bottom: 4rpx;}
			}
			.right-box{width: 150rpx;border-left: 2rpx solid #999;justify-content: center;}
			.centre-box{flex: 1;justify-content: center;color: #999;
				.iconfont{color: #333;font-weight: normal;padding-right: 14rpx;font-size: 30rpx;}
			}
			image{width: 26rpx;height: 34rpx;margin-right: 10rpx;}
		}
	}
	// 金刚区导航
	.nav-list{
		background-color: #fff;padding: 40rpx 20rpx;border-radius: 30rpx;margin-top: 30rpx;box-shadow: 0 0 10rpx #eee;
		.item{width: 20%;flex-direction: column;justify-content: center;
			image{width: 100rpx;height: 100rpx;display: block;}
			text{display: block;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;padding: 14rpx 0;}
		}
	}
	// 推荐-标题
	.re-title{
		justify-content: space-between;
		.red-dot{position: absolute;left: 14rpx;background-color: $tc;width: 14rpx;height: 32rpx;border-radius: 10rpx;}
		.title{padding-left: 20rpx;font-weight: bold;color: #000;font-size: 34rpx;}
		.more{font-size: 26rpx;color: #666;white-space: nowrap;
			.iconfont{margin-left: 10rpx;margin-top: 4rpx;}
		}
	}
	.recommend-list{
		background-color: #fff;padding: 40rpx 20rpx 0;border-radius: 30rpx 30rpx 0 0;margin-top: 30rpx;position: relative;
		.re-list{
			align-items: flex-start;
			.item{
				width: 205rpx;padding: 30rpx 0 30rpx 0;margin: 0 18rpx;
				image{width: 206rpx;height: 154rpx;border-radius: 20rpx;display: block;}
				.title{color: #111;font-size: 30rpx;font-weight: bold;padding: 4rpx 0;}
				.label{color: #666;font-size: 24rpx;}
				.price{color: #f00;font-size: 30rpx;}
			}
		}
	}
	// 底部更多列表
	.more-list{
		background-color: #fff;padding: 30rpx 20rpx;margin-top: 30rpx;position: relative;
		.more-item{
			padding: 30rpx 0 10rpx 0;
			.image{
				// image{width: 206rpx;height: 160rpx;border-radius: 20rpx;display: block;}
			}
			.info{
				margin-left: 20rpx;overflow: hidden;
				.title{
					.name{font-size: 30rpx;
							font-weight: bold;
							// line-height: 30rpx;
					  //   max-height: 60rpx;
					  //   overflow: hidden;
					  //   display: -webkit-box;
					  //   -webkit-line-clamp: 2;
					  //   -webkit-box-orient: vertical
					}
					.label{align-self: flex-start;
						text{background-color: $tc;color: #fff;font-size: 24rpx;padding: 2rpx 8rpx;border-radius: 6rpx;margin: 0 6rpx;}
						.wait{background-color: #999;}
					}
				}
				.position{font-size: 24rpx;color: #666;}
				.label-list{white-space: nowrap;color: #ffa100;
					text{color: #ffa100;font-size: 26rpx;margin-right: 20rpx;
						&:last-child{margin-right: 0;}
					}
				}
				.price-box{
					.price{color: #f00;font-size: 30rpx;}
					.text{margin-left: 30rpx;font-size: 26rpx;color: #666;}
				}
			}
			
		}
		.more{text-align: center;font-size: 30rpx;color: #666;padding: 20rpx 0 10rpx 0;
			.iconfont{margin-left: 14rpx;}
		}
	}
</style>
